<template>
    <div class="content">
        <div class="top_form">
            <!-- 反馈人 -->
            <el-input class="input1" v-model="input1" placeholder="反馈人"></el-input>
            <!-- 反馈内容 -->
            <el-input v-model="input2" placeholder="反馈内容"></el-input>
            <!-- 日期 -->
            <el-date-picker class="width-full" v-model="value2" type="daterange" align="right" unlink-panels
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
            <div style="margin-top: 10px; width: 100%;">
                <!-- 反馈回复 -->
                <el-input style="width: 27%;" v-model="input3" placeholder="反馈回复"></el-input>
                <!-- 状态 -->
                <el-select v-model="value" style="width: 27%;" clearable placeholder="反馈状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <!-- 按钮 -->
                <el-button class="button1" type="primary" icon="el-icon-search">搜索</el-button>
                <el-button class="button3" type="primary" icon="el-icon-edit" @click="reset">重置</el-button>
                <el-button class="button1" type="danger" icon="el-icon-delete">批量删除</el-button>
                <el-button class="button2" type="success" icon="el-icon-upload">批量导出</el-button>
            </div>
        </div>
        <div class="contain_form">
            <div class="table">
                <el-table :data="newest"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#F0F0F1', 'color': 'black', 'font-size': '14px', 'font-weight': '900' }"
                    :cell-style="{ 'text-align': 'center' }" border tooltip-effect="dark"
                    style="width: 100%; font-size: 14px; color: rgb(31, 45, 61);" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column type="index" label="反馈人" width="120">
                    </el-table-column>
                    <el-table-column prop="unitname" label="反馈内容" width="120">
                    </el-table-column>
                    <el-table-column prop="buildnum" label="反馈时间" width="120">
                    </el-table-column>
                    <el-table-column prop="storeynum" label="服务内容" width="120">
                    </el-table-column>
                    <el-table-column prop="homenum" label="处理状态" width="120">
                    </el-table-column>
                    <el-table-column prop="homename" label="服务评分" width="120">
                    </el-table-column>
                    <el-table-column label="操作" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[5, 10, 20, 50, 100]" :current-page="Obj.currPage" :page-size="Obj.pageNum"
                    layout="total, sizes, prev, pager, next,jumper" :total="shuliang">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            input1: '',
            input2: '',
            input3: '',
            value2: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value: '',
            options: [{
                value: '1',
                label: '已处理'
            }, {
                value: '2',
                label: '未处理'
            },],
            newest: [],
            shuliang: 0,
            Obj: {
                homestatus: '',
                unitname: '',
                buildnum: '',
                homenum: '',
                homename: '',
                currPage: 0,
                pageNum: 10,
                token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTM1LCJ1c2VybmFtZSI6ImFkbWluIiwiZW1haWwiOiIxIiwiaGVhZCI6IjIwMjMxMDMwMjA0NTIzOTg5MTE3Ny5qcGciLCJ0eXBlIjoiMSIsImlhdCI6MTY5ODcxMjU5MCwiZXhwIjoxNjk4Nzk4OTkwfQ._q_NEN4xur4ck7EIAJaJezwK9F3DCI-Jk9zLBPtzeY8',
            }
        }
    },
    created() {
        this.getDate()
    },
    methods: {
        getDate() {
            this.$axios
                .get("/poster/getFeedBack", {
                    params: this.Obj
                })
                .then((res) => {
                    console.log(res);
                });
        },
        // 重置
        reset() {
            this.Obj.homestatus = '',
                this.Obj.unitname = '',
                this.Obj.buildnum = '',
                this.Obj.homenum = '',
                this.Obj.homename = '',
                this.getDate();
        },
        // 分页导航
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.Obj.pageNum = val
            this.getDate()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.Obj.currPage = val - 1
            this.getDate()
            this.Obj.currPage += 1
        },
        handleSelectionChange(val) {
            console.log(val);
        },
    }
}
</script>
<style scoped>
.top_form {
    font-size: 14px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.input1 {
    width: 27%;
}

.el-input:nth-child(2),
.el-input:nth-child(3),
.width-full {
    width: 27%;
    margin-left: 10px;
}

.button1,
.button2,
.button3 {
    color: #fff;
    font-size: 14px;
    margin-left: 10px;
    width: 8%;
    border-radius: 4px;
}

.button3 {
    color: #fff;
    background-color: #f7ba2a;
    border-color: #f7ba2a;
}

/* 表格 */
.contain_form {
    margin-top: 20px;
}

.pagination {
    float: right;
    margin-top: 10px;
}
</style>